import React, { useState, useEffect } from 'react';
import { Line } from '@ant-design/charts';
import { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
import axios from 'axios'
import api from '../../../utils/requestUtils/apiConfig'
import moment from 'moment';
export default () => {
    const [dataSource, setDataSource] = useState([])
    const [chartLoading, setChartLoading] = useState(false)
    const [type, setType] = useState(0)
    const [time, setTime] = useState([])
    const [score, setScore] = useState([])

    const queryUserInfo = async () => {
        const params = {
            userId: localStorage.getItem('id') || sessionStorage.getItem('id'),
            type: type,
        }
        setChartLoading(true)
        await axios({
            url: api.queryScoreByCondition,
            method: 'post',
            headers: '',
            params: {},
            data:params
        }).then((res) => {
            const result = res.data.data
            const message = res.data.message
            const score = []
            const time = []
            if (message == 'success') {
                result.forEach(item => {
                    
                        time.push(moment(item.createTime).format("M月D日"));
                        score.push(item.score);
                    
                })
                setScore(score)
                setTime(time)
            }
            else {
                setScore([])
                setTime([])
            }
            setChartLoading(false)
        })
    }
    useEffect(() => {
        queryUserInfo()
    }, [])


    const option = {

        tooltip: {
            trigger: 'axis'
        },
        // legend: {
        //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '科目一',
                type: 'line',
                stack: '总量',
                data: score
            },
        ]
    };

    return (
        <>
            {/* <Line {...config} /> */}
            <ReactEcharts
                option={option} />
        </>
    );
};

